<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{ accountAmount }}

    <div>
        名：<span>{{ firstName }}</span>
        性：<span>{{ lastName }}</span>
        {{ computedName }}
        <button @click="modifyName">改名卡</button>
    </div>
</div>

</body>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            'firstName': '紫坤',
            'lastName': '李',
            'book': [
                {'id': 1, 'name': '我与地坛', 'money': 70},
                {'id': 2, 'name': '病隙碎笔', 'money': 50}
            ]
        },
        methods: {
            modifyName() {
                this.computedName = '李丽君'
            }
        },

        computed: {
            accountAmount() {
                let moneyList = this.book.map(item => {
                    return item.money
                })
                return moneyList.reduce((acc, value) => acc + value, 0)
            },
            computedName: {
                get() {
                    return this.firstName + this.lastName
                },
                set(val) {
                    this.lastName = val.slice(0, 1)
                    this.firstName = val.slice(1)
                }
            }
        }
    })
</script>
</html>